<template>
	<view class="container">			
		<view class="square">			
			<view class="title">请选择您要注册的角色类型</view>
			<view class="check">
				<radio-group name="Role" @change="RoleChange">
					<label><view class="r1"><radio value="0" :checked="true" color="#3d7dfd" /></view><view class="r2">单身男女</view></label>
					<label><view class="r1"><radio value="2" color="#3d7dfd" /></view><view class="r2">孩子家长</view></label>
					<label><view class="r1"><radio value="1" color="#3d7dfd" /></view><view class="r2">公益红娘</view></label>
				</radio-group>
			</view>
			<button class="login" @click="Sure">立即注册</button>
			<view class="service">
				<view class="read">
					<checkbox-group>
						<label @touchstart.stop="Agree"><checkbox value="1" :checked="Checked" style="transform:scale(0.6)"/>同意</label><text class="blue" @click="Protocol">《注册协议》</text>和<text class="blue" @click="Privacy">《隐私政策》</text>
					</checkbox-group>
				</view>
			</view>
			<view class="cancel" @click="Cancel">取消注册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Role:0,
				Checked:false,
				OProtocol:0,
				RProtocol:0,
				APrivacy:0
			};
		},
		onShow() {
			uni.$once("OProtocol",OProtocol=>{
				this.OProtocol = OProtocol;
			});
			uni.$once("RProtocol",RProtocol=>{
				this.RProtocol = RProtocol;
			});
			uni.$once("Privacy",APrivacy=>{
				this.APrivacy = APrivacy;
			});
		},
		methods:{
			RoleChange(e){
				this.Role=e.detail.value;				
			},
			Agree(e){				
				if(this.Role==0 || this.Role==2){
					if(this.OProtocol==0 || this.APrivacy==0){
						this.Checked=false;
						this.Util.Alert("请点开并阅读注册协议和隐私政策");
						return;
					}
				}
				if(this.Role==1){
					if(this.RProtocol==0 || this.APrivacy==0){
						this.Checked=false;
						this.Util.Alert("请点开并阅读注册协议和隐私政策");
						return;
					}
				}
				this.Checked=!this.Checked;
			},
			Protocol(){
				if(this.Role==0 || this.Role==2){
					uni.navigateTo({
						url:"/pages/login/webview?Name=注册协议&Path=OProtocol"
					})
				}else{
					uni.navigateTo({
						url:"/pages/login/webview?Name=注册协议&Path=RProtocol"
					})
				}
			},
			Privacy(){
				uni.navigateTo({
					url:"/pages/login/webview?Name=隐私政策&Path=Privacy"
				})
			},
			Cancel(){
				uni.setStorageSync("Cancel","true");
				uni.navigateBack({
					delta:2
				})
				setTimeout(item=>{
					uni.setStorageSync("Cancel","false");
				},3000);
			},
			Sure(){
				if(!this.Checked){
					this.Util.Alert("请阅读并同意协议");
					return;
				}
				if(this.Role==0 || this.Role==2){
					uni.navigateTo({
						url:"/pages/login/regist?Flag=regist&Role="+this.Role
					})
				}else{
					uni.navigateTo({
						url:"/pages/matcher/matcherapply?Flag=apply"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{background-image: url(https://yuehuiba.qiyedaishu.com/img/bg4.png); background-size: 100%; background-repeat: no-repeat;}
	.square{ width:600rpx; height:calc(100vh - 500rpx); display: flex; flex-direction: column; margin:0 auto; margin-top:250rpx; background-color: #ffffff; opacity: 0.8; border-radius: 40rpx;
		.title{width:100%; height: 180rpx; padding-left:50rpx; font-size:40rpx; font-weight: bold; padding-top:80rpx; float:left;}
		.check{width:100%; height:auto; padding-left:50rpx; float:left;
			radio-group{display: flex; flex-direction: column;
				label{width:100%; height: 100rpx; display: flex; flex-direction: row;
					.r1{height: 80rpx; line-height: 80rpx;}
					.r2{font-size:40rpx; height: 80rpx; line-height: 80rpx; padding-left:20rpx;}
				}
			}
		}
		.cancel{width:100%; height: 50rpx; line-height: 50rpx; margin-top:80rpx; float:left; text-align: center; color:#a8a8a8;}
		.login{width:86%; height: 100rpx !important; line-height: 100rpx !important; padding:0rpx !important; margin-top:150rpx;  color:#fff; margin-left:7%; float:left; background-color: #03c239; border-radius:50rpx;}
		.login image{float:left; margin-top:25rpx; width:60rpx; height:60rpx; margin-left:90rpx;}
		.login view{float:left; font-size:36rpx; padding-left:20rpx;}
		.service{padding-top:20rpx;
			.read{padding-left:30rpx; font-size:28rpx;}
		}
	}
</style>
